<script setup lang="ts">
import {onMounted, nextTick, watch} from 'vue';
import JsBarcode from 'jsbarcode';

const props = defineProps<{data: any[]; visible: boolean}>();
const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();
import {computed} from 'vue';
const visible = computed({
  get: () => props.visible,
  set: (value) => {
    emit('update:visible', value);
  },
});
const getBarcode = () => {
  let options: any = {
    text: '编码内容', //等同于JsBarcode第二个参数
    fontSize: 10, //条形码下方文字的大小
    height: 50, //条形码的高度
    width: 2.5, //条形码 条的宽度不是总体的宽度 (宽度过小 扫描枪会扫描不出来 天坑我踩过)
    displayValue: true, //是否隐藏条形码下方文本
  };
  // JsBarcode第一个参数是容器ID名 第二个参数是条形码扫描后的内容(默认条形码的内容会在条形码下方展示) 第三个参数是方法的配置项(具体配置查看官网)
  //   JsBarcode('#barcode', '5', options);
  //这个函数是实现批量生成的功能（没用可以删除）
  props.data.forEach((item: any, index: number) => {
    // options.text = item.order_number;
    // options.order_number = item.order_number;
    JsBarcode('#barcode-' + index, item.value, options); //挂载条形码方法 注意批量生成 容器必须是唯一的 且同时都要存在 思路容器加上循环的index即可
  });
};

const ok = () => {
  emit('update:visible', false);
};
watch(
  () => props.visible,
  (nextState) => {
    if (nextState) {
      nextTick(() => {
        getBarcode(); //需要再真实DOM渲染完成后执行否则就会报错
      });
    }
  },
);
// onMounted(() => {
//   nextTick(() => {
//     getBarcode(); //需要再真实DOM渲染完成后执行否则就会报错
//   });
// });
</script>

<template>
  <a-modal v-model:open="visible" title="打印条形码" width="700px" @ok="ok">
    <div v-for="(item, index) in data" :key="index">
      <img :id="'barcode-' + index" style="width: 360px" />
    </div>
  </a-modal>
</template>
